1
00:00:00,170 --> 00:00:05,330
والآن بعد أن رأيت ما يمكنك فعله باستخدام عنصر عنوان HTML، سننتقل إلى العنصر التالي

2
00:00:05,330 --> 00:00:07,880
التعرف على هو عنصر الفقرة.

3
00:00:07,880 --> 00:00:13,490
ويتعلق هذا أيضًا بتنسيق النص ووضعه على مواقعنا الإلكترونية.

4
00:00:14,000 --> 00:00:22,070
هذا هو الشكل الذي يبدو عليه عنصر الفقرة ويشبه عنصر العنوان، لقد حصلت على الافتتاحية

5
00:00:22,100 --> 00:00:31,670
العلامة وعلامة الإغلاق، وبينهما لديك المحتوى الذي سيكون فقرتك.

6
00:00:32,000 --> 00:00:39,710
الآن سبب حاجتنا إلى علامة فقرة هو أنه إذا كان لديك نص عادي في مستند HTML الخاص بك،

7
00:00:39,740 --> 00:00:46,720
عندما تقوم بتشغيل الكود ورؤيته على موقع ويب، ما ستراه هو شيء من هذا القبيل.

8
00:00:46,730 --> 00:00:53,870
النص، يصطدمان ببعضهما البعض على نفس السطر ولا يمكنك في الواقع معرفة مكان فقرة واحدة

9
00:00:53,870 --> 00:00:56,060
يبدأ وأين ينتهي الآخر.

10
00:00:56,510 --> 00:01:03,630
من ناحية أخرى، إذا قمنا بإنشاء عنصرين فقرتين لهذين السطرين، فعندئذ عند التشغيل

11
00:01:03,630 --> 00:01:10,890
الكود الذي ستراهم مفصولين بخط بينهما لتتمكن من التمييز بين المختلف

12
00:01:10,890 --> 00:01:12,060
الفقرات.

13
00:01:12,630 --> 00:01:18,930
وهذا أيضًا مهم جدًا للأشخاص الذين يستخدمون قارئات الشاشة، لذا فإن الأشخاص الذين قد يكونون مكفوفين،

14
00:01:18,960 --> 00:01:26,010
لأن ما سيفعله قارئ الشاشة هو أنه سيرى بداية كل عنصر فقرة وبداية كل عنصر

15
00:01:26,010 --> 00:01:33,480
يتيح للمستخدم الكفيف أن يتمكن من الانتقال إلى الفقرة التالية بسهولة ويكون قادرًا على رؤية ما يحدث

16
00:01:33,480 --> 00:01:34,770
في كل مرة.

17
00:01:35,340 --> 00:01:41,460
الآن دعونا نضع هذه المهارات موضع التنفيذ من خلال تجربة تمرين باستخدام عنصر الفقرة.

18
00:01:41,730 --> 00:01:47,130
إذا توجهت إلى موارد الدورة التدريبية لهذا الدرس، فمن المفترض أن تكون قادرًا على تنزيل الملف المضغوط

19
00:01:47,130 --> 00:01:50,100
لعنصر الفقرة 2.2.

20
00:01:50,100 --> 00:01:56,040
وبمجرد الانتهاء من استخراجه وفك ضغطه، قم بوضعه في مشاريع تطوير الويب الخاصة بك

21
00:01:56,040 --> 00:01:59,520
المجلد ثم افتحه داخل vs code.

22
00:01:59,550 --> 00:02:06,150
لقد أوضحت لك كيفية القيام بكل هذا في الدرس السابق في عنصر عنوان HTML بالإضافة إلى الدرس الأولي

23
00:02:06,150 --> 00:02:11,910
الدرس عندما أوضحت لك كيفية تنزيل موارد الدورة التدريبية، لذا تأكد من التحقق من تلك الأماكن إذا كنت تريد ذلك

24
00:02:11,910 --> 00:02:14,850
لا أعرف كيفية الحصول على هذا المجلد.

25
00:02:15,060 --> 00:02:20,970
ولكن بمجرد فتحه بهذا الشكل، أريدك أن تمضي قدمًا وتفتح ملف Index.html،

26
00:02:20,970 --> 00:02:24,690
وهو كما هو الحال دائمًا، حيث سنقوم بكتابة الكود الخاص بنا.

27
00:02:24,930 --> 00:02:32,070
لاحظ هنا أن لدينا ثلاث فقرات، الفقرة الأولى، والفقرة الثانية، والفقرة الثالثة.

28
00:02:32,070 --> 00:02:36,240
ثم هناك بعض النصوص النائبة باللغة اللاتينية، والتي لا تعني شيئًا.

29
00:02:36,240 --> 00:02:42,180
إنه موجود فقط حتى تتمكن من رؤية الشكل الذي ستبدو عليه فقرة النص.

30
00:02:42,180 --> 00:02:49,860
وعند المضي قدمًا والنقر بزر الماوس الأيمن وإظهار المعاينة، يجب أن ترى أن جميع الفقرات موجودة

31
00:02:49,860 --> 00:02:58,050
مختلطة معًا في سطر واحد طويل ولا يمكننا تحديد أين تبدأ فقرة واحدة وتنتهي الفقرة الأخرى.

32
00:02:58,050 --> 00:03:05,490
إذن مهمتك الآن هي حل هذه المشكلة باستخدام ما تعلمته عن عنصر الفقرة.

33
00:03:05,490 --> 00:03:12,960
لذا، تابع تنسيق هذه الفقرات الثلاث باستخدام علامة الفقرة، وبمجرد الانتهاء من ذلك، يجب عليك القيام بذلك

34
00:03:12,960 --> 00:03:14,250
انظر المعاينة.

35
00:03:14,280 --> 00:03:22,560
أظهر شيئًا مثل هذا حيث يتم فصل كل فقرة إلى أسطر جديدة وبشكل واضح بصريًا

36
00:03:22,560 --> 00:03:28,650
قادرون على رؤية الفرق ونحن قادرون على التمييز بين هذه الفقرات الثلاث المختلفة.

37
00:03:28,980 --> 00:03:32,880
أوقف الفيديو مؤقتًا الآن، وبمجرد الانتهاء، سنتناول الحل معًا.

38
00:03:36,890 --> 00:03:37,280
حسنًا.

39
00:03:37,280 --> 00:03:39,800
سنستخدم علامة الفقرة الخاصة بنا.

40
00:03:39,800 --> 00:03:46,970
لذلك، سنقوم بوضع علامة الفتح هنا أمام الفقرة الأولى مباشرةً، وبعد ذلك سنفعل ذلك

41
00:03:46,970 --> 00:03:53,510
لوضع علامة الإغلاق في نهاية الفقرة الأولى، ثم سنكرر ذلك

42
00:03:53,510 --> 00:03:56,810
بشكل أساسي لجميع الفقرات الأخرى.

43
00:03:59,490 --> 00:04:03,390
الآن يمكنك أن ترى أنني أقوم فقط بالنقر والسحب.

44
00:04:03,510 --> 00:04:11,370
وبدلاً من ذلك، يمكنك قصها ثم لصقها في نهاية الفقرة.

45
00:04:11,400 --> 00:04:16,950
لا يهم حقًا كيفية القيام بذلك، طالما أنك حصلت على هذه العلامات في الأماكن الصحيحة.

46
00:04:16,950 --> 00:04:24,250
ونأمل الآن أن يتم تحديث المعاينة الخاصة بك وأن تتمكن من رؤية هذه الفقرات تتشكل أثناء الكتابة.

47
00:04:24,270 --> 00:04:27,660
لذلك يبدو هذا مشابهًا إلى حد كبير لهدفنا.

48
00:04:27,660 --> 00:04:35,760
وإذا قمت بفحص HTML للحل، فيجب أن ترى العلامات في الأماكن الصحيحة أيضًا.

49
00:04:35,880 --> 00:04:42,780
لذا نأمل ألا يكون ذلك صعبًا للغاية وأن تكون قادرًا على القيام بكل ذلك بنفسك وقد رأيت الآن ما حدث

50
00:04:42,780 --> 00:04:51,870
هل فائدة استخدام عنصر الفقرة لفصل النص إلى فقرات مختلفة من المحتوى؟

51
00:04:52,140 --> 00:04:59,260
الآن، ما رأيته في التمرين هو عبارة عن أجزاء من النص النائب، وهو ما يمكن أن نشير إليه باسم

52
00:04:59,260 --> 00:05:00,310
لوريم إيبسوم.

53
00:05:00,340 --> 00:05:04,240
إنه شيء سوف تصادفه كثيرًا، خاصة في تصميم الويب.

54
00:05:04,240 --> 00:05:11,110
وذلك حتى لا ننتهي بشيء مثل هذا حيث نحاول محاكاة المحتوى في فقرة ما،

55
00:05:11,110 --> 00:05:15,310
ولكننا بعد ذلك نكتب محتوى، محتوى، محتوى، أو هذه فقرة، هذه فقرة،

56
00:05:15,310 --> 00:05:16,180
هذه فقرة.

57
00:05:16,180 --> 00:05:20,500
والسبب وراء عدم رغبتنا في القيام بذلك هو أن هذه الكلمات كلها نفس الكلمات.

58
00:05:20,530 --> 00:05:22,240
الجملة لها نفس الطول.

59
00:05:22,240 --> 00:05:27,640
لا يبدو الأمر كما تبدو عليه كتلة النص الطبيعية، وليس لدينا الوقت أو الطاقة

60
00:05:27,640 --> 00:05:31,660
لإنشاء المحتوى فعليًا للاختبار وتصميم الويب فقط.

61
00:05:31,660 --> 00:05:35,140
ولهذا السبب نستخدم ما يسمى لوريم إيبسوم.

62
00:05:35,590 --> 00:05:44,320
ويبدو أن لوريم إيبسوم يأتي من الأدب الكلاسيكي اللاتيني لمؤلف مشهور يدعى شيشرون.

63
00:05:44,350 --> 00:05:51,160
إذا كنت قد سمعت عنه وعمره يزيد عن 2000 عام وقد تم استخدامه في صناعة الطباعة منذ

64
00:05:51,160 --> 00:05:57,700
سنوات عديدة، منذ القرن السادس عشر، حتى، حيث بدأ الناس في توزيع الصحف ومتى

65
00:05:57,700 --> 00:06:01,780
لم يكن لديهم محتوى التخطيط، وكانوا يستخدمون نص العنصر النائب هذا.

66
00:06:01,810 --> 00:06:09,640
إذا كنت ترغب في الحصول عليها، يمكنك الذهاب إلى Simcom وهناك ستجد Lorem ipsum حتى في

67
00:06:09,640 --> 00:06:17,050
لغات مختلفة مثل الهولندية أو البولندية، ويمكنك استخدام هذه الأداة لإنشاء أكبر عدد ممكن من الفقرات

68
00:06:17,050 --> 00:06:24,160
أو كلمات أو بايتات أو قوائم حسب حاجتك بمجرد استخدام زر الإنشاء هذا.

69
00:06:24,160 --> 00:06:29,130
وهنا لدي خمس فقرات جاهزة لوضعها في تصميم الويب الجديد الخاص بي.

70
00:06:29,140 --> 00:06:35,290
الآن، بدلًا من الحصول على شيء يشبه هذا حيث يكون كل شيء بنفس الطول، بدلاً من ذلك

71
00:06:35,290 --> 00:06:42,310
لدينا فقرات ذات مظهر طبيعي للغاية تحاكي إلى حد كبير ما قد تفعله المقالة الإنجليزية العادية

72
00:06:42,310 --> 00:06:43,150
تبدو وكأنها.

73
00:06:43,150 --> 00:06:47,230
ويتم ذلك في غضون ثواني باستخدام لوريم إيبسوم.

74
00:06:47,560 --> 00:06:53,410
الآن، إذا كان Lorem ipsum مملاً بعض الشيء بالنسبة لك، فهناك في الواقع بعض الإصدارات الجديدة من هذا النص.

75
00:06:53,440 --> 00:06:59,650
أحد المواقع المفضلة لدي هو موقع bacon ipsum.com وسوف يولد شبيهاً بـ Lorem ipsum، لكن بعد ذلك سوف تقوم

76
00:06:59,650 --> 00:07:05,710
احصل على كلمات مثل لحم الخنزير المقدد والجناح ولحم الخنزير وبطن لحم الخنزير.

77
00:07:05,740 --> 00:07:11,950
الآن، إذا لم تكن من آكلي اللحوم، فربما ينبغي عليك تجربة موقع مثل bro ipsum.com حيث يمكنك ذلك

78
00:07:11,950 --> 00:07:18,550
احصل على جميع مصطلحات إخوانه بتنسيق Lorem ipsum.

79
00:07:18,580 --> 00:07:35,110
ومن الواضح أن الأشياء التي يقولها الإخوة هي أشياء مثل تاكو أسير الحرب ولوح الغسيل والسكك الحديدية وهيلي باوباو،

80
00:07:35,200 --> 00:07:36,670
مهما كان.

81
00:07:36,670 --> 00:07:42,370
وإذا لم يعجبك أي من هذه الأشياء، فإنني أوصي بالذهاب إلى Google ويمكنك العثور عليها بالفعل

82
00:07:42,370 --> 00:07:46,270
المزيد من هذا النوع من الأشياء بمجرد البحث عن نص لوريم إيبسوم المضحك.

83
00:07:46,270 --> 00:07:52,780
وهناك مجموعة كاملة من الأنواع المختلفة مثل ipsum النباتي أو ipsum القراصنة وسوف تصادفك

84
00:07:52,780 --> 00:07:56,170
جميع أنواع مولدات النصوص النائبة المختلفة.

85
00:07:56,170 --> 00:08:02,290
ولكن الشيء المهم هو أنك تعرف كيفية الحصول عليها ويمكنك استخدامها في التعليمات البرمجية الخاصة بك.

86
00:08:02,290 --> 00:08:10,300
لذا كتحدي إضافي، إذا أردت ذلك، يمكنك إنشاء نسختك الخاصة من لوريم إيبسوم أو بيكون

87
00:08:10,300 --> 00:08:18,880
ipsum أو إخوانه ipsum ويمكنك إنشاء مقال باستخدام علامة الفقرة و Lorem ipsum الذي قمت به

88
00:08:18,880 --> 00:08:20,200
ولدت.

89
00:08:20,500 --> 00:08:26,500
لا تتردد في تعديل ملف Index.html في تمرين البرمجة الذي أكملناه للتو.

90
00:08:26,980 --> 00:08:32,260
لذا قم بتجربة ذلك وتأكد من التعليق في أقسام QandA أدناه.

91
00:08:32,260 --> 00:08:39,400
إذا وجدت بعض لوريم إيبسوم الذي تعتقد أنه مثير للسخرية أو مضحك حقا أو رائع حقا وسوف أرى

92
00:08:39,400 --> 00:08:40,929
لك في الدرس القادم